<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>A very basic Superfish menu example</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<link rel="stylesheet" type="text/css" href="sooperfish.css" media="screen">
		<link rel="stylesheet" type="text/css" href="themes/sooperfish-theme-large.css" media="screen">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.easing-sooper.js"></script>
		<script type="text/javascript" src="jquery.sooperfish.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
      $('ul.sf-menu').sooperfish({
        animationShow:   {'width':'show'},
        speedShow:     400,
        animationHide:  {'width':'hide'},
        speedHide:      100
      });
    });
    </script>

	</head>
	<body>

  <ul class="sf-menu" id="nav">
    <li class="current">
      <a href="#a">Fruits by Color</a>
      <ul>
        <li>
          <a href="#aa">All fruits with drawings and photos</a>
        </li>
        <li class="current">
          <a href="#ab">Red Fruits</a>
          <ul>
            <li class="current"><a href="#">Red Apples</a></li>
            <li><a href="#aba">Red Grapes</a></li>
            <li><a href="#abc">Cherries</a></li>
            <li><a href="#abb">Strawberries</a>
              <ul>
                <li class="current"><a href="#">Dutch Strawberries</a></li>
                <li><a href="#aba">French Strawberries</a></li>
                <li><a href="#abb">German Strawberries</a></li>
                <li><a href="#abc">American Strawberries</a></li>
                <li><a href="#abd">Scandinavian Strawberries</a></li>
              </ul>
            </li>
            <li><a href="#abd">Berries</a></li>
            <li><a href="#abd">Cherry Tomatoes</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Yellow Fruits</a>
          <ul>
            <li><a href="#">Bananas</a></li>
            <li><a href="#">Lemons</a></li>
            <li><a href="#">Mangos</a></li>
            <li><a href="#">Dragon Fruit</a></li>
            <li><a href="#">Tangerine</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Green Fruits</a>
          <ul>
            <li><a href="#">Green apples</a></li>
            <li><a href="#">Kiwis</a></li>
            <li><a href="#">Melons</a></li>
            <li><a href="#">Pears</a></li>
            <li><a href="#">Unripe bananas</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Singularity</a>
    </li>
    <li>
      <a href="#">Widgets</a>
      <ul>
        <li>
          <a href="#">Things</a>
          <ul>
            <li><a href="#">Red things</a></li>
            <li><a href="#">Blue things</a></li>
            <li><a href="#">Green things</a></li>
            <li><a href="#">Yellow things</a></li>
            <li><a href="#">Black things</a></li>
          </ul>
        </li>
        <li><a href="#">Stuff</a></li>
        <li>
          <a href="#">Others</a>
          <ul>
            <li><a href="#">Really white others</a></li>
            <li><a href="#">Broken white others</a></li>
            <li><a href="#">Silver others</a></li>
            <li><a href="#">Grey others</a></li>
            <li><a href="#">Ash others</a></li>
            <li><a href="#">Anthracite others</a></li>
            <li><a href="#">Really black others</a></li>
            <li><a href="#">Galactic void others</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Misc</a>
          <ul>
            <li><a href="#">Cyan others</a></li>
            <li><a href="#">Magenta others</a></li>
            <li><a href="#">Yellow others</a></li>
            <li><a href="#">Black others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">Cyan others</a></li>
            <li><a href="#">Magenta others</a></li>
            <li><a href="#">Yellow others</a></li>
            <li><a href="#">Black others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">Cyan others</a></li>
            <li><a href="#">Magenta others</a></li>
            <li><a href="#">Yellow others</a></li>
            <li><a href="#">Black others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">Cyan others</a></li>
            <li><a href="#">Magenta others</a></li>
            <li><a href="#">Yellow others</a></li>
            <li><a href="#">Black others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">Cyan others</a></li>
            <li><a href="#">Magenta others</a></li>
            <li><a href="#">Yellow others</a></li>
            <li><a href="#">Black others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">White others</a></li>
          </ul>
        </li>
        <li><a href="#">Unique thing</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>

 </body>
</html>